<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta charset="utf-8" />
    <title>MDemo Homes</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1 maximum-scale=1" />
    <link href="~/favicon.ico" media="screen" rel="shortcut icon" />
    <link rel="Stylesheet" type="text/css" href="./css/mobile.css" />
    <script language="javascript" type="text/javascript" src="./js/jquery-1.6.4.js"></script>   
    <script language="javascript" type="text/javascript" src="./js/jquery.mobile-1.0rc1.min.js"></script>
    
    <script language="javascript" type="text/javascript" src="./js/klass.min.js"></script>
    <script language="javascript" type="text/javascript" src="./js/code.photoswipe.jquery-3.0.0.js"></script>
    <script language="javascript" type="text/javascript" src="./js/jquery.cookie.js"></script>
    <script language="javascript" type="text/javascript" src="./js/ryland.geolocation.js"></script>
</head>

<body class="" data-theme="c">
    <div id="index" data-role="page">
        <div data-role="header" data-backbtn="false">
            <a href='#' class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a>
		    <h1 id="title">Fx Signal</h1>
            <a href="/" class="ui-btn-right jqm-home" data-ajax="false">Home</a>
	    </div>
		<!-- // END header -->
	
	    <div data-role="content">
	        <ul id="account"></ul>
	        <ul data-role="listview"></ul>
	     </div>
	     <!-- // END content -->
	     <div data-role="footer" id="footer">
		    <h5><a data-ajax="false" href="/index_pc.html" title="view full site">view full site</a> <br />
	           &copy;2012 Fx Signal</h5>
	     </div>
	     <!-- // END footer -->
    </div>
    <!-- // END page -->

    <script language="javascript" type="text/javascript">
    $('.ui-li.ui-btn').live('click', function () {
        var link = $(this).find('a:first');
        if (link) {
            if ($(link).attr('data-ajax') == "false") {
                document.location = $(link).attr('href').toString();
            } else {
                $.mobile.changePage($(link).attr('href').toString());
            }

        }
    });    
    $('.ui-btn-back').live('tap', function () {
        history.back(); return false;
    }).live('click', function () {
        history.back(); return false;
    });    
    $('[data-role=page]').live('pageshow', function (event, ui) {
        if ($('[bodyclass]:first').length == 1) {
            $('body').addClass($('[bodyclass]').attr('bodyclass'));
        }
        var query = $(this).data("url").split("?")[1];
        var symbol = "";
        if ( typeof query != "undefined" ){
        	symbol = query.replace("symbol=","");
        }
        if(this.id =="index"){
        	jurl = '/fx/list.json';
        }else if(this.id =="detail"){
        	if(symbol == ""){
        		jurl = '/fx/history.json';
        	}else{
        		jurl = '/fx/history/'+symbol;
        	}
        }
        callJson(this.id,jurl);
    });    
    function callJson(sid,jurl){
    	$.getJSON(jurl, function(data) {
    		if(sid =="index")
    			readIndexJson(data);
    		if(sid =="detail")
    			readDetailJson(data);
  	    });
    }    
    function readIndexJson(data){
        var adata = data.account;
        var acnt = $("#account");
        acnt.text('');
        $.each(adata, function(ix, v){
        	var text = '';
        	text +='<li style="margin: 0 auto;" class="ui-li-has-arrow ui-btn ui-btn-icon-right">';
        	text +='<p><h2> Account : ['+v.account+']<br> Profit : '+v.profit+' Balance : '+v.lots+' Open Count : '+v.opencount+'</h2></p>';
        	text +='</li>';
    		acnt.append($(text));
        });
        
    	var data = data.rows;
    	var list = $("[data-role=listview]");
    	list.text('');
    	$.each(data, function(index, v){
    		var profitColor = "blue";
    		var trendColor = "blue";
    		if(v.trend=="SELL")
    			trendColor = "lime";
    		if(v.profit<0)
    			profitColor = "red";
    		var html = "";
    		html += '<li style="margin: 0 auto; height:55px" class="ui-li-has-arrow ui-btn ui-btn-icon-right">';
    		html += '<h1 style="float:left; text-align:center;line-height:55px;"><a data-ajax="false" href="/mhtml/chart.jsp?symbol='+v.symbol+'&trend='+v.trend+'""></a>['+v.symbol+'] &nbsp;&nbsp; ';
    		html += 'Trend : <font color='+trendColor+'>'+v.trend+'</font> &nbsp;&nbsp; ';
    		html += 'Profit : <font color='+profitColor+'>'+v.profit+'</font></h1>';
    		html += '<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>'; 
    		html += '</li>';
    		list.append($(html));
    	});
    	list.listview('refresh');
    }
    function readDetailJson(data){ 

    	var data = data.rows;
    	var list = $("[data-role=listview]");
    	list.text('');
    	$.each(data, function(index, v){
    		var html = "";
    		html += '<li style="margin: 0 auto;">';
    		html += '<h2>'+v.ticket+'  ['+v.symbol+']</h2>'+"<p> Trend : "+v.trend+" Balance : "+v.lots+" Price : "+v.price+" Profit : $"+v.profit+"</p>";
    		html += '</li>';
        
    		list.append($(html));
    	});
    	
    	list.listview('refresh');
    }    

    </script>

</body>
</html>
